import React, { useEffect, useState } from "react";
import { timesago } from "../../utils/index";
import { Card, Tag, Tooltip, Spin, Empty } from "antd";
import { ADD_BREAD } from '../../redux/actions/Breadcrumb'
import Lbxins from "../../api/lbxin";
import "./index.less";
import {
  EyeOutlined,
  CloudSyncOutlined,
  SoundOutlined,
  SnippetsOutlined
} from "@ant-design/icons";
// import { object } from "prop-types";
import { Link,withRouter } from "react-router-dom";
import { connect } from 'react-redux'

// const { Meta } = Card;
interface IArticalProps {}

const Artical: React.FunctionComponent = (props:any): any => {
  const addBread  = props.addBread
  const [articalList, setarticalList] = useState([]);
  const [CardLoading, setCardLoading] = useState(true);
  const itemCardShow = (index: number) => {
    let ListData: any = [...articalList];
    ListData[index].CardToolTipShow = true;
    setarticalList(ListData);
  };
  const itemCardHide = (index: number) => {
    let ListData: any = [...articalList];
    ListData[index].CardToolTipShow = false;
    setarticalList(ListData);
  };
  const goTypeItem = (res:any) => {
    // props.history.push({ pathname: "/articalList", state: { id: res.id,shareTopicTitle: res.shareTopicTitle } })
    // props.addBread({path:"/articalList",icon:null,title:res.shareTopicTitle}); 
  }
  useEffect(() => {
    
    Lbxins.getData("/default/getShareTopicList")
      .then(res => {
        res.data.map((res: { [x: string]: boolean }) => {
          return res["CardToolTipShow"] = false;
        });
        setarticalList(res.data.sort((a:any,b:any)=>{return b.updateTime - a.updateTime}));
        setCardLoading(false);
      })
      .catch(err => {
        console.log(err, "log-err");
        setCardLoading(false);
      });
    // return () => {
    //   cleanup
    // }
  }, []);
  return (
    <Spin spinning={CardLoading} delay={500}>
      <div className="articalBox contentBox">
        {articalList.map((res: any, index: number) => {
          return (
            <Link
              key={res.id}
              to = {{ pathname: "/articalList", state: { id: res.id,shareTopicTitle: res.shareTopicTitle } }}
              onClick={()=>{goTypeItem(res)}}
            >
              <Card
                hoverable
                title={res.shareTopicTitle}
                loading={CardLoading}
                className="articalCard"
                style={{ width: 280 }}
                cover={
                  res.shareImg.length>3?
                    <img
                      alt=""
                      src={res.shareImg ? res.shareImg : res.shareResource}
                    />:<Empty description="暂无图片" />
                }
                onMouseEnter={() => {
                  itemCardShow(index);
                }}
                onMouseLeave={() => {
                  itemCardHide(index);
                }}
                actions={[
                  <div
                    style={{ display: "flex", justifyContent: "space-around" }}
                  >
                    <Tag
                      className="articalTage"
                      icon={<EyeOutlined />}
                      color="processing"
                    >
                      {res.view_count}
                    </Tag>
                    <Tooltip
                      title={
                        "时间段：" +
                        new Date(res.addTime).toLocaleDateString() +
                        " ~ " +
                        new Date(res.updateTime).toLocaleDateString()
                      }
                    >
                      <Tag
                        className="articalTage"
                        icon={<CloudSyncOutlined />}
                        color="processing"
                      >
                        {timesago(res.updateTime)}
                      </Tag>
                    </Tooltip>
                    <Tooltip title={res.shareAdvice}>
                      <Tag
                        className="articalTage"
                        icon={<SoundOutlined />}
                        color="processing"
                      >
                        提示
                      </Tag>
                    </Tooltip>
                    <Tooltip title={"文章数量：" + articalList.length}>
                      <Tag
                        className="articalTage"
                        icon={<SnippetsOutlined />}
                        color="processing"
                      >
                        {articalList.length}
                      </Tag>
                    </Tooltip>
                  </div>
                ]}
              >
                {/* <Meta title={res.shareTopicTitle} description="www.instagram.com" /> */}
                {res.CardToolTipShow ? (
                  <span className="CardToolTip">{res.shareInfo.length>3?res.shareInfo:"暂无描述信息"}</span>
                ) : (
                  ""
                )}
              </Card>
            </Link>
          );
        })}
      </div>
    </Spin>
  );
};
const mapDispatchToProps = (dispatch: any) => {
  return {
    addBread: (info:any) => {
      console.log(info,'log-info')
      // { pathname: "/articalList", state: { id: res.id,shareTopicTitle: res.shareTopicTitle } }
      dispatch({ type: ADD_BREAD, info })
    }
  }
};
// export default withRouter(mapDispatchToProps,Artical);
export default withRouter(connect(
  null,
  mapDispatchToProps
)(Artical));